{% extends 'base.html' %}

{# Side bar menu #}
{% block sidebar %}
	<div class="sidebar">
		<h3>Menu</h3>
		<ul>
        	<li><a href="/timelines/new">Nova Timeline</a></li>
			<li><a href="/user/timelines">Minhas Timelines</a></li>
			<br />
			<br />
        	<li><a href="/user/events">Meus Eventos</a></li>
      	</ul>
	</div>
{% endblock %}

{% block content %}		
	
	<div class="content">
		<script>
			$("#timelines_menu").addClass("selected");
		</script>  

		{% if timeline.title %}
			<h1>{{timeline.title}}</h1>
		{% else %}
			<h1>Timelines</h1>
		{% endif %}
		
		{# This selector is used to filter categories #}
		{% ifnotequal action "import" %}
		<div class="selector">
			<form action="" method="get">
				<select name="timeline_category" id="timeline_category">
					<option id=0 name="all" value="0">Todas as categorias</option>
					{% for c in category %}
						
						{% ifequal selected_category c.id %}
							<option name={{c.id}} value={{c.id}} id={{c.id}} selected="selected">{{ c.name }}</option>
						{% else %}
							<option name={{c.id}} value={{c.id}} id={{c.id}}>{{ c.name }}</option>
						{% endifequal %}
						
					{% endfor %}
				</select>
				<input type="submit" value="Ok" class="small_button" />
			</form>
		</div>
		{% endifnotequal %}
		
		<div class="p25">
	
			{% if not timelines %}
				{% ifequal selected_category 0 %}
					<ul>
						<li><h4>Não há timelines no sistema.</h4></li>
					</ul>
				{% else %}
					<ul>
						<li><h4>Não há timelines nesta categoria.</h4></li>
					</ul>
				{% endifequal %}
			{% endif %}
	
			{% ifequal action "list" %}
				<ul class="list">
				{% for timeline in timelines %}
					
						<li><a href="/timelines/{{ timeline.id }}" ><div class="list display_timeline" id={{ timeline.id }}>{{ timeline }}</div></a></li>
					
				{% endfor %}
				</ul>
			{% else %}
				
				{% ifequal action "select" %}
				<p>Você pode selecionar abaixo as timelines existentes no sistema que podem contribuir com sua timeline.</p>
				<form action="" method="get" name="select_timelines_form" id="select_timelines_form">
					<input type="hidden" value="{{timeline.id}}" name="timeline_id" id="timeline_id" />
					<ul class="list">
						{% for timeline in timelines %}
							<div class="p25">
								<span class="checkbox"><input type="checkbox" name="timelines" value={{ timeline.id }} id={{ timeline.id }} /></span> 
								{{ timeline }}
							</div>
						{% endfor %}
					</ul>
					<div class="p20"><input type="checkbox" name="checkAllAuto" id="checkAllAuto"/> Marcar / Desmarcar Todas</div>
										
					<div class="button_container p25">
						<input type="button" value="Selecionar" class="button" id="select_timelines"/>
						<input type="button" value="Importar Depois" class="button" id="import_later" />
					</div>
					 
				</form>
				{% else %}
					<p>Abaixo encontram-se os eventos existentes para as timelines selecionadas. Os eventos encontram-se agrupados por timeline.</p>
					<form action="" method="post" name="select_timelines_form" id="import_events_form">
						<input type="hidden" value="{{timeline.id}}" name="timeline_id" id="timeline_id" />
						{% for g in groups %}
							<div class="group">
								<div class="group_title">{{g.timeline}}</div>
								{% for e in g.events %}
									<div class="group_item"><input type="checkbox" name="events" value={{ e.id }} id={{ e.id }}/> {{e}}</div>
								{% endfor %}
								{% if not g.events %}
									<div class="group_item">Não há eventos nesta timeline.</div>
								{% endif %}
							</div>
						{% endfor %}
						<div class="p20"><input type="checkbox" name="checkAllAuto" id="checkAllAuto"/> Marcar / Desmarcar Todas</div>
						<div class="button_container p25">
							<input type="button" value="Importar Depois" class="button" id="import_later" />
							<input type="button" value="Importar" class="button" id="import_events"/>
						</div>

					</form>				
				{% endifequal %}
				
			{% endifequal %}
			
		</div>
	</div>
{% endblock %}
